<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组methods</title>
    <script src="../vue.global.js"></script>
    <style>
        .red{
            color:red;
        }
        .font-big{
            font-size: 50px;
        }
    </style>
</head>
<body>

<div id="App">

    <ul>
        <li v-for="item of citys" v-bind:key="item.id"><input type="checkbox">{{item.name}}</li>
    </ul>

    <button v-on:click="addCity">add</button>

</div>


<script>



    const App = {

        data(){
            return {
                citys: [
                    {name:"北京",id:1},
                    {name:"长沙",id:2},
                    {name:"成都",id:3},
                ]
            }
        },
        methods:{
            addCity(){
                this.citys.unshift({id:4,name:"花果山"});
            }
        },
        computed:{

        }
    };

    const vm = Vue.createApp(App).mount("#App")


</script>
</body>
</html>